<script lang="ts" setup>
import { reactive, ref } from 'vue'
import axios from "axios"
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
var goBack = function () {
  if(window.localStorage.getItem("user")=="undefined" || window.localStorage.getItem("user")==null){alert("当前为未登录上传页，只能用于上传，不可返回主页")}
  else {window.location.replace("../Home/Home.html");}
};
// do not use same name with ref
const form = reactive({
  title: '',
  type: '',
  source: '',
  webLink: '',
  cover_url: '',
  pic_url: '',
  textarea:''
})
const ruleFormRef = ref<FormInstance>()

const fileList_cover = ref<UploadUserFile[]>([

])

const fileList_pic = ref<UploadUserFile[]>([

])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}

const labelPosition = ref('top')
const size = ref('large')
let Type = ''

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入政策来源', trigger: 'blur' }
  ], title: [
    { required: true, message: '请输入政策标题', trigger: 'blur' }
  ], webLink: [
    { required: true, message: '请输入政策原地址', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'blur' }
  ],
  source: [
    { required: true, message: '请输入政策来源', trigger: 'blur' }
  ], bulk: [
    { required: true, message: '请输入政策内容', trigger: 'blur' }
  ], cover_url: [
    { required: true, message: '请上传封面', trigger: 'blur' }
  ], pic_url: [
    { required: true, message: '请上传图片(暂仅支持一张)', trigger: 'blur' }
  ]

})



const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
// const onSubmit=function(){
//   if(form.type=='教育')Type='academy';
//   else if(form.type=='就业')Type='findJob';
//   else if(form.type=='医疗')Type='medic';
//   // console.log(Type);
//   // console.log(Date.now()+'');
//   console.log(fileList_cover.value[0].url)
//   var proxy={
//         "bulk":textarea.value,
//         "policyType":Type,
//         "timeStamp":Date.now()+'',
//         "theme":form.title,
//         "pic":fileList_pic.value[0].url,
//         "cover":fileList_cover.value[0].url,
//         "source":form.source,
//         "webLink":form.webLink
//       };
//   console.log(proxy)
//    axios({
//       url:'http://192.168.2.108:3000/sendPolicy',
//       method: 'post',
//       data:proxy
//   })
//   console.log('success')
// }
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (form.type == '教育') Type = 'academy';
      else if (form.type == '就业') Type = 'findJob';
      else if (form.type == '其他') Type = 'other';
      // console.log(Type);
      // console.log(Date.now()+'');
      var proxy = {
        "bulk": form.textarea,
        "policyType": Type,
        "timeStamp": Date.now() + '',
        "theme": form.title,
        "pic": form.pic_url,
        "cover": form.cover_url,
        "source": form.source,
        "webLink": form.webLink
      };
      var proxy_form = new FormData();
      proxy_form.append("bulk", proxy.bulk)
      proxy_form.append("policyType", proxy.policyType)
      proxy_form.append("timeStamp", proxy.timeStamp)
      proxy_form.append("theme", proxy.theme)
      proxy_form.append("pic", proxy.pic)
      proxy_form.append("cover", proxy.cover)
      proxy_form.append("source", proxy.source)
      proxy_form.append("webLink", proxy.webLink)
      axios({
        url: 'http://8.130.46.21:8000/policy/add/',
        method: 'post',
        data: proxy_form
      })
      console.log('success')
      alert('发布成功')
      // setTimeout(function () {
      //   goBack()
      // }, 500)
      form.title="";
      form.type="";
      form.source="";
      form.webLink="";
      form.cover_url="";
      form.pic_url="";
      form.textarea="";
    }
    else {
      console.log('error submit!')
      alert('发布失败，请核对后重试')
    }
  })
}


var HandleSuccess_cover = function (res) {
  console.log(res)
  form.cover_url = res
}
var HandleSuccess_pic = function (res) {
  console.log(res)
  form.pic_url = res
}

</script>



<template>
  <div class="main">
    <div class="grxx">
      <div class="back" @click="goBack()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-left" />
        </svg>
      </div>政 策 发 布
    </div>

    <el-form :model="form" label-width="60px" :label-position="labelPosition" :size="size" :rules="rules"
      ref="ruleFormRef">
      <el-form-item label="政策标题" prop="title">
        <el-input v-model="form.title" clearable />
      </el-form-item>
      <el-form-item label="政策类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="教育" />
          <el-radio label="就业" />
          <el-radio label="其他" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="政策来源" prop="source">
        <el-input v-model="form.source" />
      </el-form-item>
      <el-form-item label="政策原网址" prop="webLink">
        <el-input v-model="form.webLink" placeholder="若没有则填无" />
      </el-form-item>
      <el-form-item label="封面" prop="cover_url">
        <el-input v-model="form.cover_url"  disabled placeholder="不要上传png格式含透明部分图片"/>
        <!-- <el-input v-model="form.cover_url" disabled/> -->

        <el-upload v-model:file-list="fileList_cover" class="upload-demo" action="http://8.130.46.21:8000/pic/upload/"
          :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :limit="1" :auto-upload="true"
          name="file" :on-success="HandleSuccess_cover">
          <el-button type="primary" class="upload1">上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="政策内容">
        <el-input v-model="form.textarea" :autosize="{ minRows: 2, maxRows: 10 }" type="textarea" placeholder="Please input" />
      </el-form-item>
      <el-form-item label="图片"  prop="pic_url">
        <el-input v-model="form.pic_url" disabled placeholder="不要上传png格式含透明部分图片"/>
        <!-- <el-input v-model="form.pic_url" disabled /> -->

        <el-upload v-model:file-list="fileList_pic" class="upload-demo" action="http://8.130.46.21:8000/pic/upload/"
          :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :limit="1" :auto-upload="true"
          name="file" :on-success="HandleSuccess_pic">
          <el-button type="primary" class="upload1">上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">发布</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>



<style scoped>
.upload-demo {
  width: 100%;
}

.grxx {
  /* display: block; */
  /* background-color: gray; */
  width: 100%;
  /* position: absolute; */
  font-size: 20px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: rgb(79, 79, 79);
}

.back {
  position: absolute;
  color: white;
  line-height: 30px;
  padding-left: 10px;
  /* background-color: #fff; */
  padding-right: 10px;
}
</style>